import React from "react"
import { SearchBar, WhiteSpace,Card } from 'antd-mobile';

// const Item = List.Item;

class SearchBarExample extends React.Component {

  render() {
    return (<div>
        <style jsx="true">{`
        body,html{
            font-size:62.5%;
        }
          .car-content {
            display: inline-block;
            width: 50%;
            text-align: left;
            color: #888;
            font-size: 1.2rem;
          }
          .car-left{
            float: left;
            width: 10%;
            background: white;
            padding: 5px;
            box-sizing: border-box;
            border: 1px solid #888;
            border-radius: 50%;
            text-align: center;
            margin-top: 4.8rem;
          }
          .am-card-footer {
            font-size: 1.2rem;
        }
          .car-left>img{
              width:90%;
          }
          .car-right{
            float: left;
            width: 90%;
          }
          html:not([data-scale]) .am-card:not(.am-card-full)::before{
            border:none;
          }
          .car-center{
            margin: 0 8px;
            height: auto;
            background: white;
            padding: 10px 0;
            overflow: hidden;
          }
          .am-card-header-extra {
            font-size: 1.2rem;
        }
        .am-card-body {
            min-height: 20px;
        }
        .yellow{
            display:inline-block;
            width:0.7rem;
            height:0.7rem;
            border-radius:50%;
            background:yellow;
            margin-right:3px;
            border:2px solid #ffc;
            vertical-align: bottom;
        }
        .red{
            display:inline-block;
            width:0.7rem;
            height:0.7rem;
            border-radius:50%;
            background:red;
            margin-right:3px;
            border:2px solid pink;
            vertical-align: bottom;
        }
        `}</style>
        <SearchBar placeholder="请输入建筑名称进行搜索" maxLength={8} />
        <WhiteSpace />
        <div className="car-center">
            <div className="car-left">
                <img  src={`https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg`}
                  alt=""/>
            </div>
            <Card className="car-right">
                <Card.Header
                    title="消检通大厦"
                    // thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                    extra={<span>总设备1</span>}
                />
                <Card.Body >
                    <div className="car-content"><span><i className="yellow"></i>温度报警设备4</span></div>
                    <div className="car-content"> <span><i className="red"></i>漏电流设备4</span></div>
                </Card.Body>
                <Card.Footer content="深圳市南山区消检通大厦1105西走道" />
            </Card>
        </div>
        
    </div>);
  }
  
}
export default SearchBarExample
